import { useState, useEffect } from 'react';
import { PersonnelEntryState } from './interface';
import { fetchUserDetail, deleteUser } from '@/service/personnelEntry';
import { IDType } from '../personnelEntry/interface';
import { Descriptions, Button, Modal, message, Image } from 'antd';
import styles from './index.scss';
import type { ProFieldFCMode } from '@ant-design/pro-utils';
import { history } from 'umi';
import Field from '@ant-design/pro-field';
export default function Details(props: any) {
    const userId = props.match.params.id;
    const show = 'read' as ProFieldFCMode;
    const [state, setstate] = useState<PersonnelEntryState>();
    const dataSourceRequest = async () => {
        const response = await fetchUserDetail(userId);
        if (response?.code === 200) {
            setstate(response.data);
        }
    };
    useEffect(() => {
        dataSourceRequest();
    }, [userId]);
    const detele = () => {
        Modal.confirm({
            icon: '',
            title: '确认删除',
            content: `您确定要删除当前记录么？`,
            okText: '确认',
            cancelText: '取消',
            maskClosable: true,
            onOk: async () => {
                const response = await deleteUser(userId);
                if (response?.code === 200) {
                    message.success('删除成功');
                    history.push('/personnelEntry');
                } else {
                    message.success('删除失败');
                }
            },
        });
    };
    return (
        <div style={{ padding: '20px', background: '#fff' }}>
            <Descriptions column={4}>
                <Descriptions.Item
                    label={<span className={styles.required}>用户名</span>}
                >
                    <Field
                        text={state?.username}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="年龄">
                    <Field text={state?.age} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="性别">
                    <Field text={state?.sex} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="是否服役">
                    <Field
                        text={state?.serve_status_text}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="所属军队">
                    <Field text={state?.army} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="兵种">
                    <Field text={state?.corps} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="证件类型">
                    <Field
                        text={state?.no_type}
                        valueEnum={IDType}
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item
                    label={<span className={styles.required}>证件编号</span>}
                >
                    <Field text={state?.no} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="头像预览">
                    <Image src={state?.avatar} width={150} />
                    {/* <Field text={state?.avatar} valueType="image" mode={show}/> */}
                </Descriptions.Item>
            </Descriptions>
            <div style={{ textAlign: 'right' }}>
                <Button
                    htmlType="button"
                    type="primary"
                    key="edit"
                    style={{ marginRight: '15px' }}
                    onClick={() => {
                        history.push(
                            `/personnelEntry/modifyPerson?mode=simple&id=${userId}`,
                        );
                    }}
                >
                    编辑
                </Button>
                <Button htmlType="button" key="delete" onClick={() => detele()}>
                    删除
                </Button>
            </div>
        </div>
    );
}
